<template>
	<view class="payDetailOuter">
		<!-- 待发货 -->
		<view class="shipped">
			<view class="shipped_title">
				待发货
			</view>
			<view class="orderNum">
				订单号：{{orderData.order_id}}<text class="copy">复制</text>
			</view>
			<view class="orderTime">
				下单时间：{{orderData.utime}}
			</view>
		</view>

		<!-- 收件人 -->
		<view class="addressee">
			<view>
				收件人：{{orderData.ship_name}}
			</view>
			<view>
				{{orderData.ship_area_name}} {{orderData.ship_address}}
			</view>
		</view>

		<!-- 商品 -->
		<view class="commodity">
			<view class="commodity_l">
				<image :src="orderData.items[0].image_url" mode=""></image>
			</view>
			<view class="commodity_c">
				<view class="commodity_c_t">
					{{orderData.items[0].name}}
				</view>
				<view class="commodity_c_b">
					{{orderData.items[0].addon}}
				</view>
			</view>
			<view class="commodity_r">
				<view class="commodity_r_t">
					￥{{orderData.items[0].price}}
				</view>
				<view class="commodity_r_b">
					x {{orderData.items[0].nums}}
				</view>
			</view>
		</view>

		<!-- 支付详情 -->
		<view class="payDetail">
			<view class="payDetail_item">
				<text>商品总价</text>
				<text>￥{{orderData.goods_amount}}</text>
			</view>
			<view class="payDetail_item">
				<text>运费</text>
				<text>￥{{orderData.goods_pmt}}</text>
			</view>
			<view class="payDetail_item">
				<text>订单总价</text>
				<text style="color: #ff0000;">￥{{orderData.order_amount}}</text>
			</view>
			<view class="payDetail_item">
				<text>支付方式</text>
				<text>{{orderData.payment_name}}</text>
			</view>
			<view class="payDetail_item">
				<text>支付时间</text>
				<text>{{orderData.payment_time}}</text>
			</view>
		</view>

		<!-- 申请售后 -->
		<view class="afterSale">
			<text>申请售后</text>
		</view>
	</view>
</template>

<script>
	import {
		serviceApi
	} from '../../api/paiModule/home.js'
	export default {
		data() {
			return {
				order_id: null,
				orderData: {},
			};
		},
		onLoad(options) {
			this.order_id = options.order_id
		},
		onShow() {
			this.getOrderDetail()
		},
		methods: {
			// 时间转换
			timeChange(time) {
				const date = new Date(time)

				const year = date.getFullYear()
				const month = date.getMonth() + 1
				const day = date.getDay()

				const h = date.getHours()
				const m = date.getMinutes()
				const s = date.getSeconds()

				return `${year}-${month}-${day} ${h}:${m}:${s}`;
			},
			// 获取订单详情
			async getOrderDetail() {
				const {
					data: res
				} = await serviceApi({
					method: "order.details",
					order_id: this.order_id,
					token: uni.getStorageSync('token')
				})
				this.orderData = res.data
				this.timeChange(this.orderData.utime)
				console.log(res.data);
			},
		},
	}
</script>

<style lang="scss" scoped>
	.payDetailOuter {
		height: 93vh;
		background-color: #f4f4f4;
		padding-top: 10px;

		.shipped {
			background-color: #fff;
			padding: 10px;
			font-size: 12px;
			line-height: 20px;
			color: #7e7e7e;

			.shipped_title {
				font-size: 14px;
				color: #000;
			}

			.copy {
				border: 1px solid #dedede;
				padding: 0 3px;
				margin-left: 6px;
			}
		}

		.addressee {
			padding: 10px;
			background-color: #fff;
			margin-top: 10px;
			font-size: 14px;

			&>view {
				&:last-child {
					font-size: 12px;
					margin-top: 3px;
					color: #909090;
				}
			}
		}

		.commodity {
			padding: 10px;
			background-color: #fff;
			margin-top: 10px;
			display: flex;
			align-items: flex-start;

			.commodity_l {
				width: 70px;
				height: 80px;
				margin-right: 10px;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.commodity_c {
				width: 50%;
				font-size: 14px;
				margin-right: 10px;

				.commodity_c_t {
					overflow-wrap: anywhere;
					text-overflow: -o-ellipsis-lastline;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					line-clamp: 2;
					-webkit-box-orient: vertical;
					margin-bottom: 3px;
				}

				.commodity_c_b {
					font-size: 12px;
					color: #757575;
				}
			}

			.commodity_r {
				font-size: 12px;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: flex-end;

				.commodity_r_b {
					margin-top: 30px;
					color: #757575;
				}
			}
		}

		.payDetail {
			background-color: #fff;
			margin-top: 10px;
			font-size: 12px;
			padding: 10px;
			line-height: 23px;

			.payDetail_item {
				width: 90%;
				display: flex;
				align-items: center;
				justify-content: space-between;

				&>text {
					&:first-child {
						color: #757575;
					}
				}
			}
		}

		.afterSale {
			height: 40px;
			position: fixed;
			bottom: 0;
			background-color: #fff;
			left: 0;
			right: 0;

			text {
				font-size: 12px;
				border: 1px solid #3e3e3e;
				padding: 4px 6px;
				position: absolute;
				right: 10px;
				top: 6px;
				bottom: 6px;
			}
		}
	}
</style>